<script setup lang='ts'>
import { useRouter } from "vue-router";
import { reactive, ref, onMounted, onUnmounted } from "vue";
import { useInfoStore } from "../../store/modules/info.js";
import ws from "../../utils/websocket.js";
import { ElMessage } from "element-plus";

// import { app } from "../../../electron/index.js";

const { ipcRenderer } = require("electron");



defineOptions({
    name: 'Login'
})

onMounted(() => {
    

})

onUnmounted(() => {
    clearInterval(timer)
    count = 5
})


const state = reactive({
    //  deviceNo: 'ASDASDASD',
   deviceNo: 'C04E300BCBF8',
    loginLoading: false,
    isWin: process.platform === 'win32'
})
// ipcRenderer.send('login','111111')


let timer = null;
let count = 5


const router = useRouter()
const formRef = ref(null)
const login = async (formRef) => {

    if (!formRef) return
    formRef.validate((valid) => {
        if (valid) {
            state.loginLoading = true;
            // ws.websocketclose()
            try {
                ws.initWebSocket(state.deviceNo)
                useInfoStore().SET_deviceNo(state.deviceNo);
                setTimeout(() => {
                    if (useInfoStore().deviceStatus === '-1') {
                        ElMessage({
                            type: 'error',
                            message: '设备信息错误'
                        });
                        ws.websocketclose();
                        return
                    } else {
                        router.push({ name: "Home" })
                    }
                    // console.log( useInfoStore().deviceStatus,'useInfoStore().deviceStatus');
                }, 4000);
            } catch (error) {
                console.error(error, 'error');
            } finally {
                setTimeout(() => {
                    if (useInfoStore().deviceStatus !== '-1') {
                        router.push({ name: "Home" })
                    }
                    state.loginLoading = false
                }, 4000);
            }



        } else {
            console.log('error submit!')
            return false
        }
    })
}

// 关闭应用
const closeWin = () => {
    console.log(ipcRenderer, '关闭');
    ipcRenderer.send('window-close')
}

// 最小化应用
const miniWin = () => {
    console.log(ipcRenderer, '最小化');
    ipcRenderer.send('window-min')
}

</script>

<template>
    <div class="login ele_drag">
        <div class="nav" v-if="state.isWin">
            <div class="nav-left">
                <img src="../../assets/logo@2x.png" alt="">
            </div>
            <div class="nav-right">
                <div class="mini no_drag" @click="miniWin">
                    <img src="../../assets/minimize@2x.png" alt="">
                </div>
                <div class="close no_drag" @click="closeWin"><img src="../../assets/close@2x.png" alt=""></div>
            </div>
        </div>
        <div class="mac-nav" v-else>
            <div class="mac-nav-left">
                <div class="close no_drag" @click="closeWin"><img src="../../assets/close@2x.png" alt=""></div>

                <div class="mini no_drag" @click="miniWin">
                    <img src="../../assets/minimize@2x.png" alt="">
                </div>
            </div>
            <div class="mac-nav-center">
                <img src="../../assets/logo@2x.png" alt="">
            </div>
        </div>
        <el-form ref="formRef" :model="state" class="demo-ruleForm">
            <el-form-item prop="deviceNo" :rules="[
                { required: true, message: '请输入设备号' },
            ]">
                <el-input v-model="state.deviceNo" maxlength="50" class="input-style no_drag"
                    placeholder="请输入设备号"></el-input>
            </el-form-item>
        </el-form>
        <el-button :loading="state.loginLoading" class="btn-style no_drag" @click="login(formRef)">登录</el-button>
    </div>
</template>

<style lang='scss' scoped>
.login {
    width: 348px;
    height: 624px;
    display: flex;
    // margin-top: 33px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    font-family: DINAlternate-Bold, DINAlternate;
    background: url('../../assets/bgPng@2x.png');
    background-size: 100% 100%;

    .nav {
        height: 33px;
        line-height: 16px;
        width: 348px;
        position: absolute;
        top: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;


        .nav-left {
            height: 12px;
            width: 93px;
            margin-left: 16px;
            margin-bottom: 16.5;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }

        .nav-right {
            display: flex;

            .mini,
            .close {
                width: 14px;
                height: 14px;
                margin-right: 9px;
                cursor: pointer;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    .mac-nav {
        height: 33px;
        line-height: 16px;
        width: 348px;
        position: absolute;
        top: 0;
        display: flex;
        // justify-content: space-between;
        align-items: center;

        .mac-nav-left {
            display: flex;
            padding-left: 13px;

            .mini,
            .close {
                width: 14px;
                height: 14px;
                margin-right: 9px;
                cursor: pointer;
                img {
                    width: 100%;
                }
            }
        }

        .mac-nav-center {
            // height: 12px;
            width: 93px;
            margin-left: 70px;
            // margin-bottom: 20;
            img{
                width: 100%;
                
            }
        }
    }

    .input-style {
        width: 308px;
        height: 48px;
        background: linear-gradient(180deg, #F4F9FD 0%, #EFF4FA 100%);
        box-shadow: 0px 10px 13px 2px rgba(113, 125, 144, 0.09);
        border-radius: 10px;
        backdrop-filter: blur(0px);
        margin-bottom: 25px;

        :deep(.el-input__wrapper) {
            width: 308px;
            height: 48px;
            background: #fff;
            box-shadow: 0px 10px 13px 2px rgba(113, 125, 144, 0.09);
            border-radius: 10px;
            backdrop-filter: blur(0px);
        }

        :deep(.el-input__wrapper::placeholder) {
            color: #fff;
            text-align: center;
        }

    }

    .btn-style {
        width: 308px;
        height: 48px;
        background: linear-gradient(180deg, #0FC056 0%, #0EAB4D 100%);
        box-shadow: 0px 7px 17px 0px rgba(14, 186, 83, 0.35);
        border-radius: 10px;
        font-size: 14px;
        font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
        font-weight: 400;
        color: #FFFFFF;
        margin-bottom: 100px;
        border: 1px solid #0eab4d;
    }


}

/* 主窗口设置了 resizable: false 禁止改变主窗口尺寸，将不可拖动，故需加drag，让其可拖动； */
.ele_drag {
    -webkit-app-region: drag;
    /* 让元素可拖动，设置了drag的元素不可点击 */
}

.no_drag {
    -webkit-app-region: no-drag;
    /* 设置了drag的元素将不可点击，故设置no-drag，让元素可点击 */
}
</style>
